<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幼儿园Main后台</title>
</head>
<link rel="stylesheet" href="/layui/css/layui.css">
<script type="text/javascript" src="js/vue.js"></script>
<body>
<div id="story" class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="">
                    {{userName}}
                    <span>{{roles}}</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                    <dd><a href="Login.html" onclick="if (confirm('确定要退出吗？')){sessionStorage.clear();}else{return false;} ">ExitSystem</a></dd>
                </dl>
            </li>
        </ul>
    </div>

<div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
         <!--   &lt;!&ndash; 左侧导航区域（可配合layui已有的垂直导航） &ndash;&gt;-->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li v-for="item in pers" class="layui-nav-item layui-nav-itemed">
                    <div v-if="item.parentId == null">
                        <a class="" href="javascript:;">{{item.perName}}</a>
                        <dl class="layui-nav-child">
                            <dd v-for="sec in pers">

                                <a v-if="sec.parentId == item.perId && sec.perType == 'menu'" :href="sec.perUrl" target="ifa">{{sec.perName}}</a>

                            </dd>
                        </dl>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!--<div class="layui-body">
        &lt;!&ndash; 内容主体区域 &ndash;&gt;
        <iframe src="/system/user/index.html" style="width: 100%" height="100%" name="ifa" frameborder="0"></iframe>
    </div>-->
</div>

<script src="/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
    });
    var vm = new Vue({
        el:'#story',
        data:{
            userName:'',
            login_user:null
        },
        created:function () {
            var User_PermissionData = JSON.parse(sessionStorage.getItem("login_user"));
            this.login_user = User_PermissionData;
            this.userName = User_PermissionData.kmsUser.userName;
        },
        computed:{
            roles:function(){
                let str = "[";
                for(let role of this.login_user.kmsUser.kmsRoles){
                    str += role.roleName + " | ";
                }
                return str+"]";
            },
            pers : function () {
                return this.login_user.kmsPermissions;
            }
        }
    })
</script>
</body>
</html>